<template>
  <div class="an-dialog">
    <el-dialog
      title="编辑商品规格"
      v-model="dialogVisible"
      width="580px"
      :before-close="changeVisible"
      :close-on-click-modal="false"
    >
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        v-if="goodsSpec.length>0"
      >
        <el-form-item label="规格属性：">
          <el-select v-model="formInline.goodsSpecID" placeholder="规格属性">
            <el-option v-for="item in goodsSpec" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <el-form :model="form" ref="form" label-width="0">
        <el-row :gutter="10" v-for="(domain, index) in form.domains" :key="domain.key">
          <el-col :span="7" style="margin-bottom:15px">
            <el-form-item
              :prop="'domains.' + index + '.name'"
              :rules="{
          required: true, message: '名称不能为空', trigger: 'blur'
        }"
            >
              <el-input v-model="domain.name" placeholder="请输入名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item
              :prop="'domains.' + index + '.price'"
              :rules="{
          required: true, message: '价格不能为空', trigger: 'blur'
        }"
            >
              <el-input v-model="domain.price" type="number" placeholder="请输入价格"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item
              :prop="'domains.' + index + '.stock'"
              :rules="{
          required: true, message: '库存不能为空', trigger: 'blur'
        }"
            >
              <el-input v-model="domain.stock" type="number" placeholder="请输入库存"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-button @click.prevent="removeDomain(domain)">删除</el-button>
          </el-col>
        </el-row>
        <el-button
          size="small"
          plain
          @click="addOption"
          icon="el-icon-plus"
          style="width:100%;"
        >添加规格</el-button>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="changeVisible">取 消</el-button>
          <el-button type="primary" @click="onSubmit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { goodsOption, GoodsSpec } from "@/utils/interface";

@Options({
  props: {
    isVisible: {
      type: Boolean,
      default: false,
    },
    options: {
      type: Array,
      default: () => [],
    },
  },
  emits: ["update:isVisible", "callBack"],
})
export default class dialogOptions extends Vue {
  [x: string]: any;
  dialogVisible: Boolean = this.isVisible;
  data() {
    return {
      formInline: {
        goodsSpecID: "",
      },
      form: {
        domains: [
          {
            id: Date.now(),
            name: "",
            price: "", // 价格
            stock: "", // 库存
            goodsSpecID: "",
          },
        ],
      },
      goodsSpec: [],
    };
  }

  mounted() {
    if (this.options.length > 0) {
      this.form.domains = JSON.parse(JSON.stringify(this.options));
    }
    this.getGoodsSpec();
  }

  // 获取规格属性
  getGoodsSpec() {
    this.$store
      .dispatch("appModule/getGoodsSpec")
      .then((res: Array<GoodsSpec>) => {
        if (res && res.length > 0) {
          this.goodsSpec = res;
        } else {
          this.$message.error("请先编辑商品规格属性");
          this.changeVisible();
        }
        if (this.options.length > 0) {
          // 原来有值
          this.formInline.goodsSpecID = this.options[0].goodsSpecID;
        } else if (res && res.length > 0) {
          this.formInline.goodsSpecID = res[0].id;
        }
        if (this.formInline.goodsSpecID) {
          this.formInline.goodsSpecID = parseInt(this.formInline.goodsSpecID);
        }
      });
  }

  // 确定提交
  onSubmit() {
    if (!this.formInline.goodsSpecID) {
      return this.$message.error("请先选择规格属性");
    }
    let el: any = this.$refs["form"];
    el.validate((valid: Boolean) => {
      if (valid) {
        let nd: Array<goodsOption> = [];
        this.form.domains.forEach((element: goodsOption) => {
          let obj: goodsOption = {
            id: element.id,
            name: element.name,
            price: element.price,
            stock: element.stock,
            goodsSpecID: this.formInline.goodsSpecID,
          };
          nd.push(obj);
        });
        this.$emit("callBack", nd);
        this.changeVisible();
      }
    });
  }

  addOption() {
    this.form.domains.push({
      id: Date.now(),
      name: "",
      price: "", // 价格
      stock: "", // 库存
      goodsSpecID: "",
    });
  }

  removeDomain(item: goodsOption) {
    let index = this.form.domains.indexOf(item);
    if (index !== -1) {
      this.form.domains.splice(index, 1);
    }
  }

  changeVisible() {
    this.dialogVisible = this.dialogVisible ? false : true;
    this.$emit("update:isVisible", this.dialogVisible);
  }
}
</script>

<style lang="scss" scoped>
.demo-form-inline {
  margin-bottom: 15px;
}
</style>
